<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const fav = () => {
  router.push('/myfav')
}
const diary = () => {
  router.push('/diary')
}
const order = () => {
  router.push('/order')
}
const present = () => {
  router.push('/present')
}
</script>

<template>
  <div class="join-us">
    <el-card class="main-card">
      <div @click="fav">
        <svg
          class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
          width="37" height="37"
        >
          <path
            d="M704.38 904.15c-14.93 0-29.95-3.67-43.75-11.09l-139.96-75.23c-7.6-4.08-16.69-4.17-24.33-0.23l-141.32 72.64c-31.48 16.16-68.67 13.13-97.08-7.92-28.41-21.05-42.16-55.75-35.85-90.54l28.3-156.35a26.209 26.209 0 0 0-7.33-23.23L130.32 500.26c-25.1-24.92-33.71-61.24-22.47-94.78 11.24-33.53 40-57.33 75.04-62.09l157.45-21.41a26.168 26.168 0 0 0 19.81-14.12l71.64-141.83c15.8-31.3 47.29-50.65 82.31-50.65h0.87c35.36 0.32 66.89 20.32 82.25 52.18l69 143.13a26.149 26.149 0 0 0 19.56 14.49l157.02 24.29c34.96 5.42 63.26 29.74 73.88 63.46 10.62 33.74 1.35 69.89-24.21 94.35l-114.8 109.86a26.118 26.118 0 0 0-7.73 23.07l25.42 156.84c5.65 34.93-8.74 69.37-37.54 89.89-16.03 11.43-34.68 17.21-53.44 17.21z m-196.1-155.54c15.03 0 30.06 3.67 43.69 11.01l139.95 75.22c12.93 6.96 23.58 1.1 27.55-1.73 3.98-2.84 12.99-11 10.64-25.49l-25.42-156.84a92.243 92.243 0 0 1 27.29-81.4l114.78-109.85c10.61-10.15 8.34-22.09 6.87-26.74-1.47-4.66-6.45-15.75-20.95-17.99l-157-24.3c-30.01-4.65-55.81-23.74-69-51.1l-69-143.13c-6.37-13.22-18.43-14.75-23.32-14.79h-0.23c-5.03 0-16.83 1.47-23.33 14.35l-71.64 141.84a92.25 92.25 0 0 1-69.91 49.82L191.8 408.9c-14.52 1.97-19.71 12.96-21.26 17.59-1.55 4.64-4.04 16.52 6.37 26.87L289.64 565.3a92.284 92.284 0 0 1 25.78 81.89l-28.3 156.35c-2.61 14.43 6.24 22.76 10.16 25.67 3.94 2.91 14.48 8.95 27.51 2.25l141.32-72.64a92.188 92.188 0 0 1 42.17-10.21zM389.65 322.76h0.11-0.11z"
          />
          <path
            d="M515.52 586.13c-58.86 0-115.4-18.7-159.19-52.65-14.91-11.57-17.63-33.03-6.07-47.93 11.57-14.92 33.03-17.63 47.93-6.07 31.88 24.72 73.55 38.33 117.33 38.33 40.85 0 80.39-12.04 111.36-33.91 15.41-10.92 36.74-7.22 47.61 8.2 10.89 15.41 7.22 36.73-8.2 47.61-42.4 29.93-95.93 46.42-150.77 46.42z"
          />
        </svg>
        <p>
          收藏
        </p>
      </div>
      <div @click="order">
        <svg
          class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
          width="37" height="37"
        >
          <path
            d="M541.43 921H292.61c-75.02 0-136.06-61.03-136.06-136.05V239.06c0-75.02 61.04-136.06 136.06-136.06h437.66c75.03 0 136.06 61.04 136.06 136.06V596.1C866.32 775.25 720.58 921 541.43 921zM292.61 172.79c-36.54 0-66.27 29.73-66.27 66.27v545.89c0 36.54 29.73 66.26 66.27 66.26h248.82c140.67 0 255.11-114.44 255.11-255.11V239.06c0-36.54-29.73-66.27-66.27-66.27H292.61z"
          />
          <path
            d="M477.78 591.28c-1.83 0-3.67-0.14-5.51-0.44-9.53-1.52-18-6.93-23.41-14.93l-47.06-69.7c-10.78-15.97-6.58-37.66 9.39-48.45 15.98-10.79 37.65-6.57 48.45 9.39l26.19 38.8 84.93-65.9c15.22-11.81 37.13-9.04 48.96 6.17 11.81 15.23 9.05 37.15-6.18 48.96l-114.37 88.76a34.83 34.83 0 0 1-21.39 7.34z"
          />
        </svg>
        <p>
          订单
        </p>
      </div>
      <div>
        <svg
          class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
          p-id="1802" width="37" height="37"
        >
          <path
            d="M730.09 920.12H292.91c-74.94 0-135.91-60.96-135.91-135.91v-545.3C157 163.97 217.97 103 292.91 103h437.18C805.03 103 866 163.97 866 238.91v545.3c0 74.95-60.97 135.91-135.91 135.91zM292.91 172.71c-36.5 0-66.2 29.69-66.2 66.2v545.3c0 36.5 29.69 66.2 66.2 66.2h437.18c36.5 0 66.2-29.69 66.2-66.2v-545.3c0-36.5-29.69-66.2-66.2-66.2H292.91z"
            p-id="1803"
          />
          <path
            d="M483.49 393H325.88c-19.25 0-34.86-15.6-34.86-34.86 0-19.25 15.61-34.86 34.86-34.86h157.61c19.25 0 34.86 15.61 34.86 34.86 0 19.26-15.61 34.86-34.86 34.86zM571.69 547.26H329.34c-21.16 0-38.31-15.6-38.31-34.86 0-19.25 17.16-34.86 38.31-34.86h242.35c21.16 0 38.31 15.6 38.31 34.86 0 19.26-17.16 34.86-38.31 34.86z"
            p-id="1804"
          />
        </svg>
        <p>
          日记
        </p>
      </div>
      <div @click="diary">
        <svg
          class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
          p-id="1946" width="37" height="37"
        >
          <path
            d="M815.33 477.97c-18.42 0-33.36-14.94-33.36-33.36V219.17c0-24.51-19.94-44.44-44.45-44.44H286.63c-24.51 0-44.44 19.94-44.44 44.44v225.44c0 18.42-14.94 33.36-33.36 33.36s-33.36-14.94-33.36-33.36V219.17c0-61.3 49.87-111.17 111.17-111.17h450.88c61.3 0 111.17 49.87 111.17 111.17v225.44c0 18.42-14.94 33.36-33.36 33.36z"
          />
          <path
            d="M513.38 479.2l-17.84-11.46c-18.8-12.08-113.18-75.76-124.19-142.94-3.66-22.31 1.74-43.28 15.63-60.62 22.41-28.01 48.07-35.67 65.66-37.16 24.62-2.11 46.55 6.42 61.72 14.92 17.65-9.29 44-19.05 71.48-14.17 23.58 4.15 43.38 18.09 57.28 40.33 56.5 90.41-94.39 188.89-111.79 199.83l-17.95 11.27z m-53.11-185.78c-0.73 0-1.46 0.03-2.18 0.1-4.24 0.4-10.82 2.11-19 12.34-1.78 2.22-2.55 4.08-1.88 8.15 3.89 23.72 43.14 60.62 76.54 85.23 42.58-30.96 85.14-76.04 72.8-95.79-5.49-8.79-10.24-9.62-12.27-9.97-13.44-2.38-34.13 9.82-40.14 14.52l-21.93 17.14-20.65-18.36c-4.32-3.68-18.59-13.36-31.29-13.36z"
          />
          <path
            d="M808.77 916H215.38c-61.3 0-111.17-49.87-111.17-111.17V531.74c0-38.42 19.41-73.58 51.9-94.06 32.5-20.48 72.59-22.81 107.25-6.22l229.53 109.83c12.18 5.83 26.18 5.83 38.36 0l229.53-109.83c34.65-16.58 74.75-14.26 107.25 6.22s51.9 55.64 51.9 94.06v273.09c0.01 61.3-49.87 111.17-111.16 111.17zM215.28 487.18c-8.16 0-16.25 2.33-23.59 6.95-13.19 8.31-20.75 22.02-20.75 37.61v273.09c0 24.51 19.94 44.45 44.44 44.45h593.38c24.51 0 44.45-19.94 44.45-44.45V531.74c0-15.59-7.56-29.29-20.75-37.6-13.19-8.31-28.82-9.21-42.88-2.49L560.06 601.47c-30.49 14.6-65.46 14.6-95.96 0L234.57 491.65c-6.24-2.98-12.79-4.47-19.29-4.47z"
          />
        </svg>
        <p>
          赠送
        </p>
      </div>
    </el-card>
    <div @click="present">
      <svg
        xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="margin: 0 auto;"
        viewBox="0 0 240 120" height="120px" width="240px"
      >
        <title>编组 5</title>
        <defs>
          <linearGradient id="linearGradient-1" y2="62.2678859%" x2="67.0870583%" y1="39.1512247%" x1="5.83583948%">
            <stop offset="0%" stop-color="#F3F4F6" />
            <stop offset="100%" stop-color="#E4E6E9" />
          </linearGradient>
          <path
            id="path-2"
            d="M43.4211749,51.3184578 C67.7872005,51.3184578 83.3460113,28.3517058 84.8757337,4.06509575 C84.8757337,4.06509575 84.8757337,4.06509575 84.8757337,4.06509575 C85.0071613,1.97848739 83.4221742,0.180413959 81.3355658,0.0489863355 C81.2777211,0.045342915 81.2198003,0.0430284106 81.1618494,0.042044653 C81.110584,0.0411715557 81.0722898,0.0406066998 81.0469666,0.040347253 C73.6351388,-0.0355901552 58.0700428,0.00887348735 42.4993277,0.06555341 C35.1289329,0.0923828401 27.757279,0.12194945 21.2484957,0.142779297 C14.1368018,0.165538618 8.05523827,0.177867633 4.13099905,0.16479942 C4.00471547,0.164378879 3.87781088,0.163873073 3.75028529,0.163282001 L3.75028522,0.163296336 C1.75816747,0.154063013 0.135751861,1.76150844 0.126518538,3.7536262 C0.126107793,3.84224558 0.128963042,3.93085 0.13507847,4.01925907 C0.13507847,4.01925907 0.13507847,4.01925907 0.13507847,4.01925907 C0.22512615,5.32105373 0.359766819,6.61909594 0.537711905,7.91005271 C0.898277721,10.5258871 1.43664253,13.1126302 2.14208607,15.6425532 C3.63563525,20.9988492 5.87810492,26.1004528 8.76775855,30.6842152 C16.4149246,42.814663 28.5945845,51.3184578 43.4211749,51.3184578 Z"
          />
          <linearGradient id="linearGradient-4" y2="100%" x2="50%" y1="9.19529602%" x1="50%">
            <stop offset="0%" stop-opacity="0.4" stop-color="#EEEEEE" />
            <stop offset="100%" stop-color="#E4E6E9" />
          </linearGradient>
          <linearGradient id="linearGradient-5" y2="100%" x2="50%" y1="0%" x1="50%">
            <stop offset="0%" stop-opacity="0.4" stop-color="#EEEEEE" />
            <stop offset="100%" stop-color="#E4E6E9" />
          </linearGradient>
          <linearGradient id="linearGradient-6" y2="100%" x2="50%" y1="0%" x1="50%">
            <stop offset="0%" stop-opacity="0.4" stop-color="#EEEEEE" />
            <stop offset="100%" stop-color="#E4E6E9" />
          </linearGradient>
          <linearGradient id="linearGradient-7" y2="100%" x2="70.7402307%" y1="0%" x1="47.3541669%">
            <stop offset="0%" stop-color="#FFFFFF" />
            <stop offset="100%" stop-color="#EFEFEF" />
          </linearGradient>
        </defs>
        <g id="页面-1" fill-rule="evenodd" fill="none" stroke-width="1" stroke="none">
          <g id="画板" transform="translate(-209.000000, -289.000000)">
            <g id="编组-5" transform="translate(209.000000, 289.000000)">
              <g id="编组-40" transform="translate(76.000000, 25.900578)">
                <ellipse id="椭圆形" ry="11" rx="10" cy="56" cx="85" stroke-width="4" stroke="#E4E6E9" />
                <g id="椭圆形备份-17" transform="translate(0.000000, 38.000000)">
                  <mask id="mask-3" fill="white">
                    <use xlink:href="#path-2" />
                  </mask>
                  <use id="蒙版" xlink:href="#path-2" fill="url(#linearGradient-1)" />
                </g>
                <rect id="矩形" rx="3" height="6" width="80" y="92" x="5" fill="#E4E6E9" />
                <rect id="矩形备份-18" rx="2" height="24" width="4" y="10" x="22" fill="url(#linearGradient-4)" />
                <rect id="矩形备份-19" rx="2" height="34" width="4" y="0" x="41" fill="url(#linearGradient-5)" />
                <rect id="矩形备份-20" rx="2" height="24" width="4" y="10" x="60" fill="url(#linearGradient-6)" />
              </g>
            </g>
          </g>
        </g>
      </svg>
      <h3>加入我们</h3>
      <p>南京麦趣科技</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@keyframes fade-in-up {
  from {
    transform: translateY(50%);
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

.join-us {
  position: relative;
  top: 20px;

  // border: 1px solid;
  * {
    text-align: center;
  }
}

.main-card {
  position: relative;
  margin: 0 auto;
  top: 20px;
  width: 90%;
  border-radius: 0 0 20px 20px;
  animation: fade-in-up 1s;

  p {
    color: grey;
    line-height: 4px;
  }
}

:deep(.el-card__body) {   /* stylelint-disable-line*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
